Highcharts এর সাহায্যে আপনি আপনার চার্টের জন্য কাস্টম থিম তৈরি করতে পারেন। এই থিমগুলো চার্টের স্টাইল, রঙ, ফন্ট এবং অন্যান্য উপাদান কাস্টমাইজ করতে সহায়ক। বিশেষ করে, Dark Theme এবং High Contrast Theme খুবই জনপ্রিয়, কারণ এগুলো ডেটা ভিজুয়ালাইজেশনকে আরও স্পষ্ট করে এবং ব্যবহারকারীদের জন্য সুবিধাজনক হয়।
Dark Theme তৈরি করা
Dark Theme একটি গা dark ় রঙের স্কিম যা চোখের জন্য কম চাপ ফেলে এবং কম আলোতে ব্যবহারকারীকে সুবিধা দেয়। Highcharts এ Dark Theme তৈরি করতে আপনি কিছু স্টাইল এবং রঙ কাস্টমাইজ করতে পারেন।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts Dark Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/dark-unica.js"></script> <!-- Highcharts Dark Theme -->
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Dark Theme Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, Highcharts.dark-unica.js ফাইলটি ব্যবহার করা হয়েছে, যা Highcharts এর জন্য একটি প্রাথমিক Dark Theme প্রদান করে। এটি চার্টের ব্যাকগ্রাউন্ড, রঙ এবং অন্যান্য উপাদান পরিবর্তন করে।
High Contrast Theme তৈরি করা
High Contrast Theme ব্যবহারকারীদের জন্য খুবই উপকারী যারা দৃষ্টি প্রতিবন্ধী বা যারা সহজে স্পষ্টভাবে ডেটা দেখতে চান। এই থিমে রঙের ব্যবধান খুব বেশি থাকে, যাতে তথ্য আরও স্পষ্টভাবে দেখা যায়।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highcharts High Contrast Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/themes/high-contrast.js"></script> <!-- Highcharts High Contrast Theme -->
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'High Contrast Theme Example'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [15, 25, 35, 45, 55]
}]
});
</script>
</body>
</html>
এখানে, Highcharts.high-contrast.js ফাইলটি ব্যবহার করা হয়েছে, যা উচ্চ কনট্রাস্টের জন্য উপযুক্ত রঙের স্কিম প্রদান করে। এটি মূলত কালো এবং সাদা বা উজ্জ্বল রঙের পার্থক্য তৈরি করে।
কাস্টম Dark Theme এবং High Contrast Theme তৈরি করা
যদি আপনি নিজস্ব Dark বা High Contrast থিম তৈরি করতে চান, তাহলে আপনাকে Highcharts.setOptions() মেথড ব্যবহার করতে হবে। এর মাধ্যমে আপনি চার্টের প্যারামিটার কাস্টমাইজ করতে পারেন, যেমন ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ, এবং অন্যান্য থিম উপাদান।
Custom Dark Theme উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Dark Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.setOptions({
chart: {
backgroundColor: '#2a2a2a', // গা dark ় ব্যাকগ্রাউন্ড
style: {
fontFamily: 'Arial, sans-serif'
}
},
title: {
style: {
color: '#ffffff', // সাদা টাইটেল রঙ
fontSize: '16px'
}
},
xAxis: {
labels: {
style: {
color: '#ffffff' // সাদা x-axis লেবেল রঙ
}
}
},
yAxis: {
labels: {
style: {
color: '#ffffff' // সাদা y-axis লেবেল রঙ
}
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'Custom Dark Theme'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এই কোডে, setOptions() মেথড ব্যবহার করে আমরা ব্যাকগ্রাউন্ড রঙ, টেক্সট রঙ এবং চার্টের অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করেছি।
Custom High Contrast Theme উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom High Contrast Theme Example</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
Highcharts.setOptions({
chart: {
backgroundColor: '#000000', // কালো ব্যাকগ্রাউন্ড
},
title: {
style: {
color: '#ff0000', // লাল টাইটেল রঙ
fontSize: '18px'
}
},
xAxis: {
labels: {
style: {
color: '#ffffff' // সাদা x-axis লেবেল রঙ
}
}
},
yAxis: {
labels: {
style: {
color: '#ffffff' // সাদা y-axis লেবেল রঙ
}
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Custom High Contrast Theme'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Value'
}
},
series: [{
name: 'Sales',
data: [10, 20, 30, 40, 50]
}]
});
</script>
</body>
</html>
এখানে, setOptions() মেথডের মাধ্যমে High Contrast Theme কাস্টমাইজ করা হয়েছে, যেখানে ব্যাকগ্রাউন্ড কালো এবং টেক্সট সাদা বা উজ্জ্বল রঙে সেট করা হয়েছে।
উপসংহার
Highcharts-এ Dark Theme এবং High Contrast Theme তৈরি করার মাধ্যমে আপনি আপনার চার্টের ভিজুয়াল উপস্থিতি আরও উন্নত করতে পারেন। আপনি Highcharts.setOptions() মেথড ব্যবহার করে কাস্টম থিম তৈরি করতে পারেন অথবা Highcharts এর প্রি-ডিফাইন্ড থিমগুলো ব্যবহার করতে পারেন। এই থিমগুলো ব্যবহারকারী অভিজ্ঞতা উন্নত করে এবং বিশেষত রাতে বা কম আলোতে সুবিধাজনক হয়।
Read more
